<script lang="ts" setup>
import { useRouter } from "vue-router";
import { useCounterStore } from "@/stores/counter";
import { getSayDetail } from "@/api/say";
import { ref, onMounted } from "vue";
import type { Ref } from "vue";

const useStore = useCounterStore();
const router = useRouter();
// 返回上级
function onClickLeft() {
  router.back();
}
// 获取详细信息
interface IsayInfo {
  desc: string;
  hospital: string;
  id: number;
  image: string;
  kinds: string;
  name: string;
  position: string;
  text: string;
}
const sayInfoDetail: Ref<IsayInfo> = ref({
  desc: "",
  hospital: "",
  id: 0,
  image: "",
  kinds: "",
  name: "",
  position: "",
  text: "",
});
onMounted(() => {
  // 获取详细信息
  getSayDetail({ id: useStore.sayId }).then((res) => {
    sayInfoDetail.value = res.data[0];
  });
});

function reservationClick(){
  useStore.setReservationId(useStore.sayId);
  router.push("/reservationlist");
}
</script>

<template>
  <van-nav-bar title="文章详情页" left-arrow @click-left="onClickLeft" />
  <div class="all_box">
    <div class="doctor_box">
      <van-image width="50" height="50" :src="sayInfoDetail.image" />
      <div>
        <p>{{ sayInfoDetail.name }}</p>
        <p>{{ sayInfoDetail.hospital + sayInfoDetail.position }}</p>
      </div>
      <van-button size="mini" type="success" @click="reservationClick">预约</van-button>
    </div>
    <div class="text_box">
      <h1>{{ sayInfoDetail.text }}</h1>
      <p>{{ sayInfoDetail.desc }}</p>
      <van-image :src="sayInfoDetail.image"></van-image>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.van-nav-bar{
  background-color: #f7fdff;
}
.all_box {
    display: flex;
    flex-direction: column;
    overflow: auto;
  .doctor_box {
    align-self: center;
    width: 90%;
    height: .5rem;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: .05rem;
    border-radius: .05rem;
    p {
      padding: 0;
      margin: 0;
    }
  }
  .text_box {
    align-self: center;
    width: 90%;
    p{
      background-color: #fff;
        padding: .1rem;
        line-height: .2rem;
        margin: .1rem 0;
        border-radius: .15rem;
        box-shadow: .03rem .03rem .1rem skyblue;
    }
  }
}
</style>
